<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/csd.ico"/>
<style type="text/css">
*{margin: 0;padding: 0;font-family: "微软雅黑";box-sizing: border-box;}
html,body{width: 100%;height: 100%;overflow: hidden;}
.wrap{display: flex;justify-content: center;align-items: flex-start; width: 1600px;height: 100%;margin: 0 auto;background-color: #eee;font-size: 0;}
.box{width: 50%;height: 100%;padding: 20px;border: 1px solid #666;}
.title{text-align: center;padding-bottom: 20px;font-size: 0;user-select: none;}
.title span{line-height: 40px;font-size: 24px;display: inline-block;margin-right: 30px;}
.btn{line-height:20px;padding: 10px 15px;border-radius: 5px; background-color: #f33;color: #fff;font-size: 16px;text-decoration: none;vertical-align: top;display: inline-block;cursor: pointer;margin-left: 15px;}
.list{list-style: none;padding: 20px 20px 0;height: calc(100% - 90px);overflow: auto;}
.item{display: flex;justify-content: flex-start;align-items: flex-start; font-size: 0;margin-bottom: 20px;}
.item span{display: inline-block;width: 40px;height: 40px;line-height: 40px;font-size: 20px;border-radius: 50%;color: #fff;text-align: center;}
.item em{font-size: 20px;font-style: normal;margin-left: 20px;cursor: pointer;white-space: nowrap;align-self: center;}
.item em:hover{color: #f33;}
.red{background-color: red;margin-right: 15px;}
.blue{background-color: blue; margin-left: 15px;}
.ol::after{display: block;content: '';clear: both;}
.jichuqiu{float: left; width: 30px;height: 30px; border-radius: 50%;margin-top: 10px;margin-right: 10px;color: #333;background-color: #ccc;font-size: 16px;text-align: center;line-height: 30px;list-style: none;cursor: pointer;}

#dtlred .checked, #ssqred .checked{background-color: red;color: #fff;}
 #dtlblue .checked, #ssqblue .checked{background-color: blue;color: #fff;}
</style>
<title>财神到</title>
</head>
<body>

<div class="wrap">
	<div class="box"><!--大乐透-->
		<h2 class="title">
			<span>大乐透</span>
			<a class="btn" onclick="laiyizhu(this,0)">来一注</a>
			<a class="btn" onclick="clearBall(this)">清空</a>
		</h2>
		<ol class="ol" id="dtlred"></ol>
		<ol class="ol" id="dtlblue"></ol>
		<ul class="list"></ul>
	</div>
	
	<div class="box"><!--双色球-->
		<h2 class="title">
			<span>双色球</span>
			<a class="btn" onclick="laiyizhu(this,1)">来一注</a>
			<a class="btn" onclick="clearBall(this)">清空</a>
		</h2>
		<ol class="ol" id="ssqred"></ol>
		<ol class="ol" id="ssqblue"></ol>
		<ul class="list">
		</ul>
	</div>
</div>

<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*大乐透*/
	var arr1 = [];
	var arr2 = [];
	
	/*双色球*/
	var arr3 = [];/*双色球红球*/
	var arr4 = [];/*双色球篮球*/	
	
	/* 基础红球 */
	function jichuqiu(id,num) {
		let html = '';
		for (let i = 1; i <= num; i++) {
			html += '<li class="jichuqiu" onclick="checked(this)">'+i+'</li>';
		}
		$(id).html(html);
	};
	
	jichuqiu('#dtlred',35);
	jichuqiu('#dtlblue',12);
	jichuqiu('#ssqred',33);
	jichuqiu('#ssqblue',16);
	
	function checked(t) {
		let father = $(t).parent().attr('id');
		if($(t).hasClass('checked')){
			if(father == 'dtlred'){
				let index = arr1.indexOf($(t).html());
				arr1.splice(index,1);
			}else if(father == 'dtlblue'){
				let index = arr1.indexOf($(t).html());
				arr2.splice(index,1);
			}else if(father == 'ssqred'){
				let index = arr1.indexOf($(t).html());
				arr3.splice(index,1);
			}else if(father == 'ssqblue'){
				let index = arr1.indexOf($(t).html());
				arr4.splice(index,1);
			};
			$(t).removeClass('checked');
		}else{
			if(father == 'dtlred'){
				arr1.push($(t).html());
			}else if(father == 'dtlblue'){
				arr2.push($(t).html());
			}else if(father == 'ssqred'){
				arr3.push($(t).html());
			}else if(father == 'ssqblue'){
				arr4.push($(t).html());
			};
			$(t).addClass('checked');
		};
	};
		
	function getRandomArrayElements(arr, count) {
		var item = [];
	    var shuffled = arr.slice(0);
	    var i = arr.length;
	    var min = i - count, temp, index;
	    while (i-- > min) {
	        index = Math.floor((i + 1) * Math.random());
	        temp = shuffled[index];
	        shuffled[index] = shuffled[i];
	        shuffled[i] = temp;
	    };
	    item = shuffled.slice(min).sort(function (a,b) {
	    	return a - b;
	    });
	    return item;
	};
	
	function laiyizhu (t,num) {
		var html = '';
		var redBalls = [];
		var blueBalls = [];
		if(num === 0){
			redBalls = getRandomArrayElements(arr1, 5);
			blueBalls = getRandomArrayElements(arr2, 2);
		}else{
			redBalls = getRandomArrayElements(arr3, 6);
			blueBalls = getRandomArrayElements(arr4, 1);
		};
		html += '<li class="item">';
			$.each(redBalls, function(index,item) {
				html += '<span class="red">'+item+'</span>';
			});
			$.each(blueBalls, function(index,el) {
				html += '<span class="blue">'+el+'</span>';
			});
			html += '<em onclick="Delete(this)">删除</em>';
		html += '</li>';
		$(t).parents('.box').find('.list').append(html);
	};
	
	function clearBall (t) {
		$(t).parents('.box').find('.list').empty();
	};
	
	function Delete (t) {
		$(t).parent('.item').remove();
	};
	
</script>

</body>
</html>
